let layer = null;

function drawSimple(h) {
  return h(
    "view",
    {
      attrs: {
        src: "",
      },
      styles: {},
    },
    [
      h(
        "view",
        {
          styles: {
            margin: 10,
          },
        },
        [
          h(
            "view",
            {
              styles: {
                display: "flex",
                alignItems: "center",
              },
            },
            [
              h(
                "view",
                {
                  styles: {
                    flex: 1,
                    paddingLeft: 10,
                    borderLeftWidth: 15,
                    borderColor: "#8170ff",
                  },
                },
                [
                  h(
                    "text",
                    {
                      styles: {
                        fontSize: 30,
                        lineHeight: 30,
                      },
                    },
                    "Hello !"
                  ),
                ]
              ),
              h("view", { styles: { flex: 1, textAlign: "right" } }, [
                h("image", {
                  styles: {
                    height: 50,
                    width: 50,
                    display: "inline-block",
                    borderRadius: 4,
                  },
                  attrs: {
                    mode: "aspectFill",
                    src: "",
                  },
                }),
              ]),
            ]
          ),
        ]
      ),
    ]
  );
}
function drawListItem(h, tag) {
  return h(
    "view",
    {
      data: {
        tag,
      },
      styles: {
        borderBottomWidth: 0.5,
        borderColor: "#ccc",
        borderStyle: "solid",
        display: "flex",
        paddingTop: 5,
        paddingRight: 5,
        paddingBottom: 5,
        paddingLeft: 5,
        marginBottom: 10,
      },
      on: {
        click(e) {
          e.currentTarget.setStyles({
            width: 200,
          });
          console.log(e.currentTarget);
        },
      },
    },
    [
      h(
        "view",
        {
          styles: {
            width: 50,
          },
        },
        [
          h("image", {
            attrs: {
              mode: "aspectFill",
              src: "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1709216491,2536617744&fm=26&gp=0.jpg",
            },
            styles: {
              borderRadius: 24,
              width: 50,
              height: 50,
              borderWidth: 0.5,
              borderColor: "#ccc",
            },
          }),
        ]
      ),
      h("view", { styles: { flex: 2, paddingLeft: 10 } }, [
        h("view", {}, [h("text", { styles: { fontSize: 16 } }, "开发指南")]),
        h(
          "view",
          {
            styles: {},
          },
          [
            h(
              "text",
              {
                styles: {
                  fontSize: 12,
                  color: "#666",
                  maxLine: 2,
                  textDecoration: ["line-through"],
                },
              },
              "小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务"
            ),
            drawInlineBlock(h),
          ]
        ),
      ]),
    ]
  );
}
function drawButton(h, text = "text", options = {}) {
  return h(
    "view",
    Object.assign(
      {
        styles: {
          height: 20,
          backgroundColor: "#ff6c79",
          borderRadius: 10,
          borderColor: "#fff",
          margin: 2,
          display: "inline-block",
          paddingLeft: 10,
          paddingRight: 10,
          lineHeight: 20,
          verticalAlign: "middle",
          color: "#fff",
        },
        on: {
          click(e) {
            console.log(e);
          },
        },
      },
      options
    ),
    text
  );
}
function drawBox(h) {
  return h(
    "view",
    {
      styles: {},
    },
    [
      h(
        "view",
        {
          styles: {
            display: "inline-block",
            width: 40,
            verticalAlign: "middle",
          },
        },
        [h("text", {}, "事事顺遂遂")]
      ),
      h(
        "view",
        {
          styles: {
            display: "inline-block",
            width: 40,
            verticalAlign: "top",
          },
        },
        [h("text", {}, "事事")]
      ),
      h(
        "view",
        {
          styles: {
            display: "inline-block",
            width: 40,
            verticalAlign: "bottom",
          },
        },
        [h("text", {}, "事事顺遂事事顺遂")]
      ),
    ]
  );
}
function drawInlineBlock(h) {
  let buttonList = [0, 0, 0, 0, 0, 0, 0].map((item, index) => {
    return h(
      "view",
      {
        styles: {
          height: 20,
          backgroundColor: "#ff6c79",
          borderRadius: 2,
          borderColor: "#fff",
          margin: 2,
          paddingLeft: 10,
          paddingRight: 10,
          display: "inline-block",
          lineHeight: 20,
        },
      },
      [
        h(
          "text",
          {
            styles: {
              lineHeight: 16,
              color: "#fff",
              fontSize: 11,
            },
          },
          `查看${index}`
        ),
      ]
    );
  });
  return h(
    "view",
    {
      styles: {
        borderTopWidth: 0.5,
        borderColor: "#ccc",
        paddingTop: 4,
        marginTop: 4,
        textAlign: "right",
      },
    },
    [...buttonList]
  );
}
function drawCard(h) {
  return h(
    "view",
    {
      styles: {
        backgroundColor: "#ff6c79",
        margin: 10,
        padding: [10, 20],
        borderRadius: 6,
        borderWidth: 1,
        borderColor: "#ff6c79",
        borderStyle: "dash",
        shadowColor: "#999",
        shadowBlur: 20,
        shadowOffsetY: 10,
        position: "relative",
      },
    },
    [
      h("view", {}, [
        h(
          "text",
          {
            styles: { color: "#fff" },
          },
          "总资产(元)"
        ),
      ]),
      h("view", { styles: { display: "flex", justifyContent: "flex-start" } }, [
        h("view", { styles: { flex: 1 } }, [
          h(
            "text",
            { styles: { fontSize: 20, fontWeight: 700, color: "#Fff" } },
            "23.43"
          ),
        ]),
        h("view", { styles: { flex: 1, textAlign: "right" } }, [
          h(
            "view",
            {
              styles: {
                height: 20,
                backgroundColor: "#fff",
                borderRadius: 10,
                borderColor: "#fff",
                margin: 2,
                display: "inline-block",
                paddingLeft: 10,
                paddingRight: 10,
              },
              on: {
                click(e) {
                  console.log(e);
                },
              },
            },
            [
              h(
                "text",
                {
                  styles: {
                    lineHeight: 16,
                    color: "#ff6c79",
                    textAlign: "center",
                    fontSize: 11,
                  },
                },
                "我的信息"
              ),
            ]
          ),
        ]),
      ]),
      h("view", { styles: { lineHeight: 30 } }, [
        h(
          "text",
          {
            styles: {
              color: "#fff",
              fontSize: 12,
              lineHeight: 20,
              verticalAlign: "middle",
            },
          },
          "最新收益0.00"
        ),
        h(
          "view",
          {
            styles: {
              display: "inline-block",
              marginLeft: 10,
              height: 16,
              borderRadius: 8,
              paddingLeft: 5,
              paddingRight: 5,
              backgroundColor: "#666",
              verticalAlign: "middle",
            },
          },
          [
            h(
              "text",
              { styles: { fontSize: 10, lineHeight: 16, color: "#fff" } },
              "赠送权益"
            ),
          ]
        ),
      ]),
      h(
        "view",
        {
          styles: {
            display: "flex",
            marginTop: 20,
            paddingTop: 20,
            borderTopWidth: 0.5,
            borderColor: "#fff",
            alignItems: "flex-end",
            color: "yellow",
            textAlign: "center",
          },
        },
        [
          h("view", { styles: { flex: 1 } }, [
            h("text", { styles: {} }, "风险评测"),
            h("text", { styles: {} }, "风险评测风险评测风险评测"),
          ]),
          h(
            "view",
            {
              styles: {
                flex: 1,
              },
            },
            [
              h("text", { styles: { width: "100%" } }, "我的定投"),
              h("text", { styles: {} }, "风险评测"),
            ]
          ),
          h(
            "view",
            {
              styles: {
                flex: 1,
                verticalAlign: "middle",
              },
            },
            [
              h("text", { styles: {} }, "优惠券"),
              h("text", { styles: {} }, "风险评测"),
            ]
          ),
        ]
      ),
    ]
  );
}
function drawScrollView(h) {
  return h(
    "scrollview",
    {
      styles: { direction: "y", height: 200 },
    },
    [
      drawListItem(h, "list1"),
      drawListItem(h, "list2"),
      drawListItem(h, "list3"),
      drawListItem(h, "list4"),
    ]
  );
}
function drawScrollViewX(h) {
  return h(
    "scrollview",
    {
      styles: {
        direction: "x",
        whiteSpace: "nowrap",
      },
    },
    [0, 0, 0, 0, 0, 0, 0, 0, 0].map((item, index) => {
      return h(
        "view",
        {
          styles: {
            display: "inline-block",
            padding: 10,
          },
        },
        [h("text", {}, "导航" + index)]
      );
    })
  );
}
function drawAbsolute(h) {
  return h(
    "view",
    { styles: { position: "absolute", top: 10, left: 10, zIndex: 10 } },
    [drawButton(h, "Absolute")]
  );
}

function drawTicket(h) {
  return h(
    "view",
    {
      styles: {
        backgroundColor: ["#eac4a3", "#d0916a"],
        margin: 10,
        padding: 10,
        borderRadius: 14,
        overflow: "hidden",
        position: "relative",
      },
    },
    [
      h(
        "view",
        {
          styles: {
            backgroundColor: "#fff",
            display: "flex",
            alignItems: "center",
            padding: 20,
            borderRadius: 14,
          },
        },
        [
          h(
            "view",
            {
              styles: {
                textAlign: "center",
                width: 70,
                marginRight: 10,
              },
            },
            [
              h("view", { styles: { fontSize: 24, color: "#d0916a" } }, [
                h("text", {}, "¥500"),
              ]),
              h("view", { styles: { fontSize: 10, color: "#9a9a9a" } }, [
                h("text", {}, "无门槛使用"),
              ]),
            ]
          ),
          h(
            "view",
            {
              styles: {
                flex: 1,
                paddingLeft: 10,
                borderLeftWidth: 0.5,
                borderColor: "#eac4a3",
              },
            },
            [
              h(
                "view",
                { styles: { fontSize: 14, fontWeight: 600, color: "#333" } },
                [h("text", {}, "随机券¥20-300")]
              ),
              h("view", { styles: { fontSize: 11, color: "#9a9a9a" } }, [
                h("text", {}, "领取后30天内可用"),
              ]),
            ]
          ),
          h(
            "view",
            {
              styles: {
                width: 60,
                textAlign: "right",
              },
            },
            [
              h(
                "view",
                {
                  styles: {
                    display: "inline-block",
                    fontSize: 12,
                    borderRadius: 12,
                    padding: [0, 10],
                    backgroundColor: "#d0916a",
                    color: "#fff",
                  },
                },
                [h("text", { styles: { lineHeight: 24 } }, "领取")]
              ),
            ]
          ),
        ]
      ),
      h("view", {
        styles: {
          position: "absolute",
          marginTop: -10,
          left: -10,
          top: "50%",
          width: 20,
          height: 20,
          backgroundColor: "#eac4a3",
          borderRadius: 10,
        },
      }),
      h("view", {
        styles: {
          position: "absolute",
          marginTop: -10,
          right: -10,
          top: "50%",
          width: 20,
          height: 20,
          backgroundColor: "#d0916a",
          borderRadius: 10,
        },
      }),
    ]
  );
}

function Dialog(h, options) {
  const instance = h(
    "view",
    Object.assign(
      {
        attrs: { className: "dialog" },
        styles: {
          position: "absolute",
          top: 0,
          left: 0,
          width: window.innerWidth,
          height: window.innerHeight,
          backgroundColor: "rgba(0,0,0,0.5)",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        },
        on: {
          click() {
            instance.remove();
          },
        },
      },
      options
    ),
    [
      h(
        "view",
        {
          styles: {
            width: 300,
            padding: 20,
            borderRadius: 4,
            backgroundColor: "#fff",
          },
          on: {
            click(e) {
              // 点击这里停止冒泡，阻止关闭弹窗
              e.stopPropagation();
            },
          },
        },
        [
          h(
            "view",
            {
              styles: {
                textAlign: "center",
                fontWeight: "bold",
                fontSize: 20,
                borderBottomWidth: 0.5,
                borderColor: "#ccc",
                lineHeight: 30,
              },
            },
            [h("text", {}, options.title || "Notice")]
          ),
          h("view", { styles: { paddingTop: 20, color: "#666" } }, [
            h("text", {}, options.content || ""),
          ]),
        ]
      ),
    ]
  );
  return instance;
}

const data = {
  date: "2016-05-02",
  name: "王小虎",
  province: "上海",
  city: "普陀区",
  address: "上海市普陀区金沙江路 1518 弄",
  zip: 200333,
};
function getTableData(count = 100) {
  let list = [];
  for (let i = 0; i < count; i++) {
    list.push(data);
  }
  return list;
}
function drawTable(h) {
  const tableData = getTableData(5000);
  const tr = {
    width: 700,
    display: "flex",
    borderBottomWidth: 0.5,
    borderColor: "#999",
    padding: [10, 0],
  };
  const td = {
    flex: 1,
    color: "#666",
    padding: [0, 5],
    display: "block",
    maxLine: 1,
  };
  const th = {
    flex: 1,
    padding: [0, 5],
    display: "block",
    maxLine: 1,
    color: "#333",
    textAlign: "center",
  };
  const tdFirst = {
    ...td,
    color: "#333",
    textAlign: "center",
    fontWeight: 800,
  };
  return [
    h(
      "view",
      {
        styles: tr,
      },
      ["序号", "日期", "姓名", "地区", "城市", "详细地址", "邮编"].map((item) =>
        h("text", { styles: th }, item)
      )
    ),
    ...tableData.map((item, index) =>
      h("view", { styles: tr }, [
        h("text", { styles: tdFirst }, index + 1),
        h("text", { styles: td }, item.date),
        h("text", { styles: td }, item.name),
        h("text", { styles: td }, item.province),
        h("text", { styles: td }, item.city),
        h("text", { styles: td }, item.address),
        h("text", { styles: td }, item.zip),
      ])
    ),
  ];
}

function setLayer(_layer) {
  layer = _layer;
}
function ontouchstart(e) {
  e.preventDefault();
  layer.eventManager.touchstart(
    e.pageX || e.touches[0].pageX || 0,
    e.pageY || e.touches[0].pageY || 0
  );
}
function ontouchmove(e) {
  e.preventDefault();
  layer.eventManager.touchmove(
    e.pageX || e.touches[0].pageX || 0,
    e.pageY || e.touches[0].pageY || 0
  );
}
function ontouchend(e) {
  e.preventDefault();
  layer.eventManager.touchend(
    e.pageX || e.changedTouches[0].pageX || 0,
    e.pageY || e.changedTouches[0].pageY || 0
  );
}
function onClick(e) {
  e.preventDefault();
  layer.eventManager.click(e.pageX, e.pageY);
}

function onmousewheel(e) {
  e.preventDefault();
  layer.eventManager.mousewheel(e.pageX, e.pageY, -e.deltaX, -e.deltaY);
}
